<template>

<div class="homeyy-body2-item" v-for="item in 15" :key="item">
            <div class="homeyy-body2-item-left">
                <van-image class="imagel" fit="fill" radius="7" :src="jishi300" />
            </div>
            <div class="homeyy-body2-item-right">
                <div class="homeyy-body2-item-righ-top">中式古法推拿</div>
                <div class="homeyy-body2-item-righ-center">固阳保健、疏通经络、舒缓疲劳、促进血液循环</div>
                <div class="homeyy-body2-item-righ-bottom">
                    <div class="homeyy-body2-item-righ-bottom-1">
                        <div class="homeyy-body2-item-righ-bottom-1-title">超过8888人下单</div>
                        <div class="homeyy-body2-item-righ-bottom-1-title2"><span class="l-red">￥298</span> <van-icon
                                color="#00aa88" name="clock" /><span class="l-gray">70分钟</span></div>
                    </div>
                    <div class="homeyy-body2-item-righ-bottom-2"><van-button style="padding: 0px 20px;" size="mini"
                            round type="primary" @click="yuyue">马上预约</van-button></div>
                </div>
            </div>
        </div>
        <div style="height: 50px;"></div>
</template>

<script setup lang="ts" name="jishi">
import { ref, reactive } from 'vue'
import {useRouter} from 'vue-router'
import jishi300 from "@/assets/images/1.jpg";
let islist = ref(false)
let Router = useRouter()
function onChangeList() {
    islist.value = !islist.value;
}

function yuyue(){
    Router.push({
        name:"service"
    })
}

</script>

<style scoped>
.homeyy-body1-item-node-body-1 {
    height: 20px;
    line-height: 20px;
    font-weight: bold;
    font-size: 12px;
    /* padding-left: 7px; */
}

.homeyy-body1-item-node-body-2 {
    height: 20px;
    line-height: 20px;
    font-size: 11px;
    /* padding-left: 7px; */
}

.homeyy-body1-item-node-body-3 {
    height: 20px;
    line-height: 20px;
    font-size: 11px;
   
}

.homeyy-body1-item-node-body-3-span {
    text-align: center;
    background-color: #3d2222;
    display: inline-block;
    width: 60px;
    border-radius: 2px;
    color: #e38c4d;
    

}

.homeyy-body1-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    padding: 0px;
    margin: 0px;

    .homeyy-body1-item-node {
        /* margin: 5px; */
        display: flex;
        flex: 0 0 50%;
        /* 每个item占据50%宽度 */
        /* height: 300px; */
        /* background-color: antiquewhite; */
    }

    .homeyy-body1-item-node-body {
        padding: 10px;
    }
}

.l-gray {
    color: gray;
    font-size: 11px;
}

.l-red {
    color: red;
    font-weight: bold
}

.homeyy-body2-item-righ-bottom-1-title {
    color: gray;
    font-size: 10px;
    line-height: 30px;
}

.homeyy-body2-item-righ-bottom-1-title2 {
    font-size: 12px;
    line-height: 5px;
}

.homeyy-body2-item-righ-bottom-1 {
    flex: 1;
}

.homeyy-body2-item-righ-bottom-2 {
    line-height: 40px;
}

.homeyy-body2-item-righ-top {
    height: 30px;
    line-height: 30px;
    font-weight: bold;
    font-size: 12px;
}

.homeyy-body2-item-righ-center {
    height: 20px;
    line-height: 20px;
    font-size: 11px;
}

.homeyy-body2-item-righ-bottom {
    display: flex;
}

.imagel {
    width: 100px;
    height: 100px;
}

.image2 {
    width: 100%;
    height: 140px;
}

.homeyy-body2-item {
    display: flex;
    height: 100px;
    padding: 5px;
    background-color: white;
    border-radius: 5px;
    margin: 10px 0px;

    /* border: 1px solid red; */
    .homeyy-body2-item-left {
        width: 100px;
        /* background-color: antiquewhite; */
        margin-right: 10px;
    }

    .homeyy-body2-item-right {
        flex: 1;
        /* background-color: rgb(55, 53, 50); */
    }

}

.homeyy-top {
    display: flex;

    .homeyy-top-left {
        flex: 1;
        font-weight: bold;
        font-size: 16px;
        font-family: 'Microsoft YaHei', 'Arial', sans-serif;
    }

    .homeyy-top-right {
        font-size: 13px;
        color: gray;
    }
}
</style>